<template>
    <div ref="heatMap" class="heatmap"></div>
</template>



<script lang="js" setup>
import {getHeatmap} from "@/api/user";
import {parseTime} from "@/utils/date";

/**
 * https://echarts.apache.org/examples/zh/editor.html?c=calendar-heatmap
 */
// const props = defineProps({
//   data:{
//     type: Array,
//     default: () => []
//   },
//   range:{
//     type: Array,
//     default: () => ['2022-1-1', '2022-12-31']
//   },
//   userId:{
//     type:String,
//     default : ""
//   }
// })

const { proxy } = getCurrentInstance()
let heatMap = ref(null)
let name = ref('热力图')

onMounted( async () => {

  const userId =  useRoute().params.userId
  const res =  (await getHeatmap(userId)).data
  const data = []

  for (const key in res) {
    const value = res[key];
    data.push([key, value])
  }
  const currentDate = new Date();
  const lastYearDate = new Date(currentDate);
  lastYearDate.setFullYear(lastYearDate.getFullYear() - 1);
  const range = [parseTime(lastYearDate,"{y}-{m}-{d}"),parseTime(currentDate,"{y}-{m}-{d}")]
  for (let i = 0; i < 365; i++) {
    const time = parseTime(new Date(currentDate.getFullYear(), currentDate.getMonth(), currentDate.getDate() - i),"{y}-{m}-{d}");
    data.push([time ,(res[time] || 0) ])
  }

  const myChart = proxy.$echarts.init(heatMap.value)
  myChart.setOption({
    tooltip: {
      formatter: function (params) {
        return params.value[0] + ' : ' + params.value[1]
      }
    },
    // title: {
    //   top: 0,
    //   left: 'left',
    //   text: '过去一年共提交145次',
    //   size:16
    // },
    visualMap: {
      show: true,
      min: 0,
      max: 10,
      maxOpen:true,
      type: 'piecewise',
      orient: 'horizontal',
      left: 'center',
      inRange: {
        color: ['#ebedf0', '#c6e48b', '#7bc96f', '#239a3b', '#196127', '#196127']
      }
    },
    calendar: {
      top:30,
      left: 30,
      right: 30,
      bottom:30,
      // width:'100%',
      itemStyle: {
        color: '#ccc',
        borderWidth: 3,
        borderColor: '#fff',
        borderCap: 'round',
      },
      cellSize: 13,
      range:  range,
      splitLine: true,
      dayLabel: {
        firstDay: 7,
        nameMap: 'ZH'
      },
      // monthLabel: {
      //   nameMap: ['一月','二月','三月','四月','五月','六月','七月','八月','九月','十月','十一月','十二月'
      //   ]
      // },
      yearLabel: {
        show: false
      },
      silent: {
        show: false
      }
    },
    series: {
      type: 'heatmap',
      coordinateSystem: 'calendar',
      data: data
    }
  })
})
</script>



<style lang="scss" scoped>
.heatmap{
  width: 100%;
  height: 200px;

}
</style>
